<template>
  <div>
    <!-- <el-container style="background-color:white">
        <input type="checkbox" />
        <label size="mini">全选</label>
        <el-button size="mini">删除</el-button>
        <el-button size="mini">加入试卷</el-button>
        <label>排序</label>
        <select name="" id="">
          <option value=""></option>
        </select>
      </el-container> -->
    <el-row :gutter="20" class="line-height-2em" style="background-color:#fff">
      <el-col :span="2" :offset="1">
        <el-checkbox v-model="checked">全选</el-checkbox>
      </el-col>
      <el-col :span="13" :offset="0">
        <el-button type="primary" size="mini" class="margin-left-20"
          >删除</el-button
        >
        <el-button type="primary" size="mini">加入试卷</el-button>
      </el-col>
      <el-col :span="6" :offset="2">
        <span>排序：</span>
        <el-select
          placeholder="序号正序"
          clearable
          filterable
          size="mini"
          :value="1"
        >
          <el-option label="正序" :value="order.asc"> </el-option>
          <el-option label="反序" :value="order.asc"> </el-option>
        </el-select>
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :direction="vertical"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column
        label="编号"
        type="index"
        width="50"
        :index="indexMethod"
      ></el-table-column>
      <el-table-column label="题干" width="120">
        <template slot-scope="scope">{{ scope.row.filltopic }}</template>
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template slot-scope="scope">
          {{ scope.row.typenum | getTypeNum }}
          <!-- <span v-if="scope.row.typenum == 1">填空题</span>
          <span v-else-if="scope.row.typenum == 2">选择题</span>
          <span v-else>简答题</span> -->
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <el-button type="primary" size="default">查看</el-button>
        |
        <el-button type="primary" size="default">修改</el-button>
      </el-table-column>
      <el-table-column label="删除">
        <el-button type="primary" size="default">删除</el-button>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next,sizes"
      :total="total"
      :page-size="10"
      :page-sizes="pageSizes"
      class="pagination"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      vertical: "vertical",
      horizontal: "horizontal",
      checked: {},
      tableData: [],
      multipleSelection: [],
      order: {
        desc: "desc",
        asc: "asc",
      },
      pageSizes: [10, 20, 30],
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  filters: {
    getTypeNum(val) {
      if (val === 1) {
        return "填空题";
      } else if (val === 2) {
        return "选择题";
      } else {
        return "简答题";
      }
    },
  },
  created() {
    // 调用方法  获取试题列表
    this.getQuestionList(this.pageNum, this.pageSize);
  },

  methods: {
    // 页面的变化
    handleCurrentChange(val) {
      // val 就是点击的页面
      this.getQuestionList(val);
    },
    // 获取试题列表
    getQuestionList(pageNum = 1, pageSize = 10) {
      this.pageNum = pageNum;
      this.pageSize = pageSize;
      this.$axios
        .get(
          `/system/sqTestpaperstable/selectAlltopic?pageNum=${pageNum}&pageSize=${pageSize}`
        )
        .then((res) => {
          // 获取数据
          console.log(res.data);
          if (res.data.code === 1) {
            // 成功获取数据
            this.tableData = res.data.data.pageInfo;
            this.total = res.data.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    indexMethod(index) {
      // 0+10+index  第一页  pageNum-1
      // 1+10+index  第二页  pageNum-1
      // 2+10+index  第三页
      return (this.pageNum - 1) * this.pageSize + (index + 1);
    },
  },
};
</script>

<style scoped>
.line-height-2em {
  line-height: 2em;
}
.pagination {
  background-color: white;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
</style>
